<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/d3.js"></script>
</head>

<body>
    <svg id="svg" width="500" height="500"></svg>
    <script>
      //散点图
      const svg = d3.select('#svg');
      const center = [
        [0.5, 0.5],
        [0.7, 0.8],
        [0.4, 0.9],
        [0.11, 0.32],
        [0.88, 0.25],
        [0.75, 0.12],
        [0.5, 0.1],
        [0.2, 0.3],
        [0.4, 0.1],
        [0.6, 0.7]
      ];
      const width = 500, height = 500;
      const padding = { top: 30, left: 30, right: 30, bottom: 30 };
      const xAxisWidth = width - padding.left - padding.right;
      const yAxisWidth = height - padding.top - padding.bottom;
      const xScale = d3.scaleLinear().domain([0, 1.2 * d3.max(center, d => d[0])]).range([0, xAxisWidth]);
      const yScale = d3.scaleLinear().domain([1.2 * d3.max(center, d => d[1]), 0]).range([0, yAxisWidth]);
      const circle = svg.selectAll("circle").data(center).enter().append('circle')
        .attr('fill', 'black').attr('cx', d => padding.left + xScale(d[0]))
        .attr('cy', d => height - padding.bottom - (yScale(0) - yScale(d[1]))).attr('r', 5);

      const yAxis = d3.axisLeft(yScale);
      const gy = svg.append('g').attr('transform', `translate(${padding.left},${padding.top})`);
      gy.call(yAxis);
      const xAxis = d3.axisBottom(xScale);
      const gx = svg.append('g').attr('transform', `translate(${padding.left},${height-padding.bottom})`);
      gx.call(xAxis);
    </script>
</body>

</html>
